import React, { Component } from 'react';
import { routerRedux, Route, Switch, Link } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button,
  Menu,
  Dropdown,
  Icon,
  Row,
  Col,
  Input,
  InputNumber,
  Steps,
  Card,
  Popover,
  Badge,
  Table,
  Tooltip,
  Divider,
  Checkbox,
  Modal,
  Radio,
  Collapse,
  Select,
  message,
  Form,
  Upload,
  Spin,
  DatePicker,
} from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import { getRoutes } from '../../../utils/utils';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import ChannelProductEditor from '../../../components/Falcon/ChannelProductEditor';
import styles from './style.less';
import { create } from 'domain';
import querystring from 'querystring';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;
const Panel = Collapse.Panel;

@connect(({ channel }) => ({
  channel,
}))
@Form.create()
export default class Step3 extends Component {
  state = {
    channelDetailValue: {},
    detailsState: '',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    const { channel: { channelDetailValue } } = this.props;
    if (channelDetailValue && channelDetailValue.branchId) {
      dispatch({
        type: 'channel/getProductDiviList',
        payload: {
          branchId: channelDetailValue.branchId,
        },
      });
    }

    channelDetailValue &&
      this.setState({
        channelDetailValue,
      });
    this.setState({
      detailsState: params.detailsState,
    });
  }

  nextStep = () => {
    const { dispatch } = this.props;
    const { channel: { channelProductDiviList } } = this.props;
    // console.log("channelProductDiviList", this.state.channelDetailValue)
    dispatch({
      type: 'channel/createChannel',
      payload: {
        ...this.state.channelDetailValue,
        productList: channelProductDiviList,
      },

      callback: () => {
        const { channel: { channelResult } } = this.props;
        if (channelResult.code == '200') {
          dispatch(routerRedux.push('/channel/channel-form/pay'));
        } else {
          message.error(channelResult.message);
        }
      },
    });
  };

  previousStep = () => {
    this.props.dispatch(routerRedux.push(`/channel/channel-form/customer?type=${2}`));
  };

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  render() {
    const { channel: { channelLoading } } = this.props;

    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };

    return (
      <Row style={{ marginTop: '50px' }}>
        <ChannelProductEditor channelDetailsState={3} wrappedComponentRef={this.saveFormRef} />
        <Row>
          <Col span={24} style={{ marginLeft: '20%' }}>
            <FormItem
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: {
                  span: formItemLayout.wrapperCol.span,
                  offset: formItemLayout.labelCol.span,
                },
              }}
              label=""
            >
              <div style={{ marginTop: '40px' }}>
                <Button onClick={this.nextStep} type="primary" loading={channelLoading}>
                  提交
                </Button>
                <Button onClick={this.previousStep} style={{ marginLeft: '20px' }}>
                  上一步
                </Button>
              </div>
            </FormItem>
          </Col>
        </Row>
      </Row>
    );
  }
}
